<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- jQuery -->
    <script src="${contextPath}/js/jquery.min.js"></script>
    <!-- umeditor 富文本编辑器 -->
    <link rel="stylesheet" href="${contextPath}/css/umeditor/themes/default/css/umeditor.min.css">
    <script src="${contextPath}/css/umeditor/third-party/template.min.js"></script>
    <script src="${contextPath}/css/umeditor/umeditor.config.js"></script>
    <script src="${contextPath}/css/umeditor/umeditor.js"></script>
    <script src="${contextPath}/css/umeditor/lang/zh-cn/zh-cn.js"></script>

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">

    <!--tables Css-->
    <link rel="stylesheet" href="${contextPath}/css/tables.css">
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">彩票后台管理系统</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>Read All Messages</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a href="#">昵称叫小名</a>
                    <input type='hidden' name='serviceId' value='${serverId}'id='serviceId'>
                    <input type='hidden' name='token' value='123456'  id='serviceToken'>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown 退出按钮-->
                <li class="dropdown">
                    <a class="btn btn-default" href="#" role="button">退出</a>
                </li>
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li>
                            <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> 图表<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="ruleChat.html">规则大类统计</a>
                                </li>
                                <li>
                                    <a href="merchantChat.html">推广渠道商统计</a>
                                </li>
                                <li>
                                    <a href="moneyChat.html">下注金额实时统计</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="tables.html"><i class="fa fa-table fa-fw"></i> 后台客服</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-user fa-fw"></i> 客服管理<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="serviceList.html">客服列表</a>
                                </li>
                                <li>
                                    <a href="serviceAdd.html">添加客服</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-headphones fa-fw"></i> 客服中心<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="/CrazyLottery_1.0.0v/callCenter/getAllUserInfo">用户管理</a>
                                </li>
                                <li>
                                    <a href="/CrazyLottery_1.0.0v/callCenter/findPage">人工充值</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-wrench fa-fw"></i>设置<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="information.html">个人信息</a>
                                </li>
                                <li>
                                    <a href="response.html">快捷回复</a>
                                </li>
                                <li>
                                    <a href="robot.html">机器人设置</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>
        <div id="page-wrapper">
            <!--custom service 客服咨询-->
            <div class="row custom-service">
                <div class="col-md-3 col-lg-3">
                    <div class="row serverUser-list">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active col-xs-6">
                                <!--接待reception-->
                                <a href="#reception" data-toggle="tab">
                                    接待（20）
                                </a>
                            </li>
                            <!--排队queue-->
                            <li class="col-xs-6">
                                <a href="#queue" data-toggle="tab">
                                    排队（10）
                                </a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="reception">
                                <!--接待侧栏-接待用户列表-->
                                <ul class="reception-users">
                                <c:forEach items="${admitList}" var="result" varStatus="status">  
                                    <li class="row userRow" userId="${result.userId}">
                                        <div class="col-xs-4 hidden-md reception-users-imgBox">
                                        
                                            <img src="${contextPath}/images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 reception-users-msg">
                                        	<p class="userId">${result.userId}</p>
                                            <p class="userName">${result.userName}</p>
                                            <p class="reception-users-words">请问提现什么...</p>
                                          
                                        </div>
                                        <i class="reception-users-wordsCounts col-xs-2">10</i>
                                        <span class="glyphicon glyphicon-remove delete-dialog"></span>
                                    </li>
                        	 </c:forEach>

                                </ul>
                            </div>
                           
                            <div class="tab-pane fade" id="queue">
                                <ul class="queue-users">
                                 <c:forEach items="${waitList}" var="result" varStatus="status"> 
                                    <li class="row userRow" userId="${result.userId}">
                                        <div class="col-xs-4 hidden-md queue-users-imgBox">
                                            <img src="${contextPath}/images/userImg.jpg" class="img-responsive img-circle" alt="Responsive image">
                                        </div>
                                        <div class="col-xs-6 col-md-8 queue-users-msg">
                                        	<p class="userId">${result.userId}</p>
                                            <p class="userName">${result.userName}</p>
                                            <p class="queue-users-words">排队用户对话</p>
                                        </div>
                                        <a href="javascript:;"><i class="queue-users-status">受理</i></a>
                                    </li>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- servering服务对话框 -->
                <div class="col-md-6 col-lg-6 servering">
                    <div class="servering-header">
                        <!--===添加结束服务选项-->
                        <span class="current-servering-user">用户名（正在咨询...）</span>
                        <span class="finish-current-servering">结束服务</span>
                    </div>
                    <div class="servering-conversation">
                        <div class="media-list">
                            <div class="reply-description">
                                机器人聊天记录
                            </div>

                            <div class="media customer-service-response">
                                <div class="media-body">
                                    您好，请问有什么可以帮助您的？
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="${contextPath}/images/userImg.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                            </div>
                            <div class="reply-description reply-description-history">
                                以上为历史记录
                            </div>
                            <div class="reply-description">
                                00:00用户进入
                            </div>
                            <div class="media users-response">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="${contextPath}/images/userImg.jpg" data-holder-rendered="true" style="width: 64px; height: 64px;">
                                    </a>
                                </div>
                                <div class="media-body">
                                    请问现在提现一般什么时候到？
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="servering-msg">
                        <!-- 富文本编辑器 -->
                        <script id="editor-container" name="content" type="text/plain"></script>
                        <div class="row sending-btn-box">
                            <a href="javascript:;" class="btn btn-large btn-primary sending-btn col-xs-2 col-xs-push-10" onclick="">发送</a>
                        </div>

                    </div>
                </div>
                <!-- 当前用户购彩记录 -->
                <div class="col-md-3 col-lg-3 purchase-history">
                    <div class="purchase-history-header">
                        TA的彩购记录
                    </div>
                    <div class="purchase-history-list">
                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="purchase-history-item">
                                        第xxxxxxxx期
                                        <span class="fa arrow"></span>
                                        </a>

                                    </h4>
                                </div>
                                <div id="collapse1" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <p>订单金额&nbsp;&nbsp;<span>2元</span></p>
                                        <p>订单状态&nbsp;&nbsp;<span>未中奖</span></p>
                                        <p>中奖金额&nbsp;&nbsp;<span>0.00元</span></p>
                                        <p>选号类别&nbsp;&nbsp;<span>大小单双</span></p>
                                        <p>下单时间&nbsp;&nbsp;<span>2017.03.26 00:00:00</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="purchase-history-item">
                    第xxxxxxxx期
                    <span class="fa arrow"></span>
                </a>
                                    </h4>
                                </div>
                                <div id="collapse2" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>订单金额&nbsp;&nbsp;<span>2元</span></p>
                                        <p>订单状态&nbsp;&nbsp;<span>未中奖</span></p>
                                        <p>中奖金额&nbsp;&nbsp;<span>0.00元</span></p>
                                        <p>选号类别&nbsp;&nbsp;<span>大小单双</span></p>
                                        <p>下单时间&nbsp;&nbsp;<span>2017.03.26 00:00:00</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="purchase-history-item">
                    第xxxxxxxx期
                    <span class="fa arrow"></span>
                </a>

                                    </h4>
                                </div>
                                <div id="collapse3" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <p>订单金额&nbsp;&nbsp;<span>2元</span></p>
                                        <p>订单状态&nbsp;&nbsp;<span>未中奖</span></p>
                                        <p>中奖金额&nbsp;&nbsp;<span>0.00元</span></p>
                                        <p>选号类别&nbsp;&nbsp;<span>大小单双</span></p>
                                        <p>下单时间&nbsp;&nbsp;<span>2017.03.26 00:00:00</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 分页 -->
                        <div class="pagination-box">
                            <div>~没有更多记录~(与分页二选一)</div>
                            <ul class="pagination">
                                <li><a href="#">&laquo;</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>

                        </div>

                    </div>
                </div>
                <!-- /.col-lg-12 -->
            </div>

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- Bootstrap Core JavaScript -->
    <script src="${contextPath}/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${contextPath}/js/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${contextPath}/js/sb-admin-2.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
        $(function() {
            $('[data-toggle="popover"]').popover();
            
          //客户框点击事件
            $(".userRow").click(function(){
                var userId = $(this).attr('userId');
                console.log(userId);
                
            });

            //关闭对话框
            $(".delete-dialog").click(function(event){
                event.stopPropagation();
                $(this).parent().remove();
            });
          
            

          //客服点击发送按钮发送消息
            $('.sending-btn').on('click',function(){
                //获取客服的id和token
                var srcId=$('#serviceId').val();
                var serviceToken=$('#serviceToken').val();
                console.log(srcId);
                console.log(serviceToken);
                //获取文本框内输入的内容
                var responseWords=$('#editor-container>p').html();
                //输入内容追加至对话盒子 之后头像需要改动态路径
                var customerServiceImg="../images/userImg.jpg";

                //客服发送消息请求
                $.ajax({
                    url:'',
                    type:'post',
//                    信息由于有表情下划线等，是html代码字符串
                    data:{srcId:srcId,dstId:userId,message:responseWords,token:serviceToken},
                    dataType:'json',
                    success:function (data) {
                        if(data.result==0){
                            var serviceResponseHTML=serviceResponse(responseWords,customerServiceImg);
                            $('.servering-conversation').append(serviceResponseHTML);
                        }else{
                            alert(data.ErrMsg);
                        }
                    }
                });
            });
            // 右栏箭头变换
            $('#collapse1').collapse('hide');
            $('.panel-title>a').each(function(index, item) {
                    index = index + 1;
                    $('#collapse' + index).on('shown.bs.collapse', function() {
                        $(this).parent().find('.arrow').addClass("arrow-rotate")
                        console.log($('#collapse' + index))
                    });
                    $('#collapse' + index).on('hide.bs.collapse', function() {
                        $(this).parent().find('.arrow').removeClass("arrow-rotate")
                    })
                })
                // 主栏富文本编辑器定制工具栏
            window.um = UM.getEditor('editor-container', {
                /* 传入配置参数,可配参数列表看umeditor.config.js */
                toolbar: [
                    'undo redo | bold italic underline',
                    'emotion',
                    'simpleupload',
                ]
            });
            
            
        });

//      封装客服消息框
        function serviceResponse(responseWords,customerServiceImg) {
            var responseStr='';
            responseStr+='<div class="media customer-service-response">';
            responseStr+='<div class="media-body">';
            responseStr+=''+responseWords+'';
            responseStr+='</div>';
            responseStr+='<div class="media-right">';
            responseStr+='<div class="media-right">';
            responseStr+='<a href="#">';
            responseStr+='<img class="media-object" data-src="holder.js/64x64" alt="64x64" src=';
            responseStr+=''+customerServiceImg+'';
            responseStr+=' data-holder-rendered="true" style="width: 64px; height: 64px;">';
            responseStr+='</a>';
            responseStr+='</div>';
            responseStr+='</div>';
            return responseStr;

        }
      
    </script>

</body>

</html>

</html>